<template>
  <div>
    <div class="search-form">
      <div class="search-item">
        <div class="item-label">日期</div>
        <div class="item-content">
          <BiDatePicker
            :key="formData.regDate+''"
            v-model="formData.regDate"
            type="daterange"
            range-separator="~"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :clearable="false"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="getSearchChangeData"
          />
        </div>
      </div>
      <div class="search-item">
        <div class="item-label">首充剧集</div>
        <div class="item-content">
          <el-select
            v-model="formData.chapter_id"
            filterable
            reserve-keyword
            clearable
            placeholder="请选择"
            @change="getSearchChangeData"
          >
            <el-option
              v-for="(item) in optionsList.chapter_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="item-label">模版类型</div>
        <div class="item-content">
          <el-select
            v-model="formData.type"
            clearable
            placeholder="请选择"
            @change="getSearchChangeData"
          >
            <el-option
              v-for="(item) in optionsList.template_type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
        </div>
      </div>
      <div class="search-item">
        <div class="item-label">付费模板</div>
        <div class="item-content">
          <el-select
            v-model="formData.pay_template_id"
            multiple
            reserve-keyword
            collapse-tags
            filterable
            clearable
            placeholder="请选择"
            @change="getSearchChangeData"
          >
            <el-option
              v-for="(item) in optionsList.template_list"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            > </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { analysisDropdown } from '@/api/content'
export default {
  name: 'PublicSearch',
  props: {},
  data() {
    return {
      getChannelTypeList: [], // 渠道类型
      usertype: 'user',
      selectLoading: false,
      advertiserName: [],
      coporationId: [],
      getPurposeList: [],
      playlet_id: '',
      optionsList: {
        template_list: [],
        template_type: [],
        chapter_list: []
      },
      formData: {
        regDate: [moment().subtract(14, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        chapter_id: '',
        type: '',
        pay_template_id: ''
      }
    }
  },
  mounted() {
    this.playlet_id = this.$route.query.playlet_id
    this.onGetSelect('template_list')
    this.onGetSelect('chapter_list')
    this.onGetSelect('template_type')
  },
  methods: {
    async onGetSelect(type) {
      const res = await analysisDropdown({ type, playlet_id: this.playlet_id })
      if (res.status_code === 1) {
        this.$set(this.optionsList, type, res.data)
      }
    },
    getSearchChangeData() {
      this.$emit('getSearchChangeData', this.formData)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>